<template>
    <div>
        <h3 ref="myH3">大标题</h3>
        <p ref="p">这是一个段落</p>
        <button @click="handleClick">获取dom-操作dom</button>
        <hr>

        <my-star ref="myStar"></my-star>
    </div>
</template>
<script>

import MyStar from './components/MyStar.vue'
export default {
  components:{
    MyStar
  },
  data(){
    return {
 
    }
  },
  methods:{
    handleClick(){
      // 1. document.querySelector 找到是整个文档中有没有这个dom元素
      // const res = document.querySelector('h3')
      // console.log(res)

      // 2. ref和refs配合 --> 当前组件中的dom元素

      // console.log()
      // this.$refs.myH3.style.backgroundColor = 'pink'
      // this.$refs.p.style.color = 'orange'
      // console.log(this.$refs.myH3)
      // console.log(this.$refs.p)


      //1. 父组件可以通过$refs调用子组件中的方法
      this.$refs.myStar.dance()
      this.$refs.myStar.sing()

      // 2. 虽然父组件可以访问子组件中的数据，可以操作，还是不太建议这么做
      this.$refs.myStar.age++
      
    }
  },

}
</script>

<style>
  .box{
    border:1px solid skyblue;
    width:200px;
    height:200px;
    margin:10px;
    padding:10px
  }

</style>